<<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->

    <style>
        body {

            background-color: aqua;
        }

        #app {
            height: 800px;
            width: 800px;
            margin: auto;
            margin-top: 300px;
        }

        #login_text {
            text-align: center;
            font-size: 50px;

        }

        #user_name {
            margin-top: 10px;
            height: 100px;
        }

        #user_text {
            text-align: center;
            margin: auto;
            float: left;
            margin-top: 30px;
            height: 25px;
            line-height: 25px;
        }
        #user_input{
            margin-left: 25px;
            height: 50px;
            margin-top: 20px;
            width: 600px;
        }
        #password_name {
            margin-top: 10px;
            height: 100px;
        }

        #password_text {
            text-align: center;
            margin: auto;
            float: left;
            margin-top: 30px;
            height: 25px;
            line-height: 25px;
        }
        #password_input{
            margin-left: 45px;
            height: 50px;
            margin-top: 20px;
            width: 600px;
        }
        #login_button{
            height: 50px;
            width: 100px;
            background-color: brown;
            margin-left: 340px;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="login_text">登录</div>
    <div id="user_name">
        <div id="user_text">用户名:</div>
        <input id="user_input"/>
    </div>
    <div id="password_name">
        <div id="password_text">密码:</div>
        <input type="password" id="password_input"/>
    </div>

    <button id="login_button" type="button" >登录</button>
</div>

</body>
<script>
    $(function(){
        $("#login_button").bind("click",function(){
            var userName = $("#user_input").val();
            var password = $("#password_input").val();
            if("" == userName){
                alert("用户名不能为空");
                return
            }
             if("" == password){
                alert("密码不能为空");
                 return
            }
            var loginData;
            $.ajax({
                url:'/login/login?userName='+userName+'&password='+password,
                type:'POST',    //GET
                async:false,    //»òfalse,ÊÇ·ñÒì²½

                timeout:5000,    //³¬Ê±Ê±¼ä
                dataType:'json', //·µ»ØµÄÊý¾Ý¸ñÊ½£ºjson/xml/html/script/jsonp/text
                success:function(data){
                    loginData = data;


                }
            });
            <%--console.log("<%=request.getContextPath()%>/test.jsp")--%>
            if(loginData.code==200){
                console.log(loginData);

                location.href="<%=request.getContextPath() %>/test.jsp";
                <%--<%response.sendRedirect("/test.jsp");%>--%>
            }else{
                alert("用户名或密码错误")
                return;
            }

        });
    });
</script>

</html>